<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.2</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="../css/font.css">
    <link rel="stylesheet" href="../css/xadmin.css">
    <link rel="stylesheet" href="../css/element.css">
    <script src="../lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/xadmin.js"></script>
    <script type="text/javascript" src="../js/axios.js"></script>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/element.js"></script>
    <script type="text/javascript" src="../js/requestjs.js"></script>
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div id="app">
    <div class="x-nav">
          <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a href="">演示</a>
            <a>
              <cite>导航元素</cite></a>
          </span>
        <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
           onclick="location.reload()" title="刷新">
            <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
    </div>
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body ">
                        <form class="layui-form layui-col-space5">
                            <div class="layui-inline layui-show-xs-block">
                                <input class="layui-input" autocomplete="off" placeholder="开始日" name="start" id="start">
                            </div>
                            <div class="layui-inline layui-show-xs-block">
                                <input class="layui-input" autocomplete="off" placeholder="截止日" name="end" id="end">
                            </div>
                            <div class="layui-inline layui-show-xs-block">
                                <input type="text" name="username" placeholder="请输入用户名" autocomplete="off"
                                       class="layui-input">
                            </div>
                            <div class="layui-inline layui-show-xs-block">
                                <button class="layui-btn" lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i>
                                </button>
                            </div>
                        </form>
                    </div>
                    <div class="layui-card-header">
                        <button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon"></i>批量删除
                        </button>
                        <button class="layui-btn" onclick="xadmin.open('添加用户','./role-add.html',600,400)"><i
                                class="layui-icon"></i>添加
                        </button>
                    </div>
                    <div class="layui-card-body ">
                        <table class="layui-table layui-form">
                            <template>
                                <el-table :data="adminData" style="width: 100%">

                                    <el-table-column label="ID" width="80">
                                        <template slot-scope="scope">
                                            <span style="margin-left: 10px">{{ scope.row.id }}</span>
                                        </template>
                                    </el-table-column>

                                    <el-table-column label="姓名" width="100">
                                        <template slot-scope="scope">
                                            <el-popover trigger="hover" placement="top">
                                                <p>姓名: {{ scope.row.aname }}</p>
                                                <p>ID: {{ scope.row.id }}</p>
                                                <div slot="reference" class="name-wrapper">
                                                    <el-tag size="medium">{{ scope.row.aname }}</el-tag>
                                                </div>
                                            </el-popover>
                                        </template>
                                    </el-table-column>

                                    <el-table-column label="号码" width="180">
                                        <template slot-scope="scope">
                                            <span style="margin-left: 10px">{{ scope.row.aphone }}</span>
                                        </template>
                                    </el-table-column>

                                    <el-table-column label="状态" width="120">
                                        <template slot-scope="scope">
                                            <span style="margin-left: 10px">
                                                <el-button type="success" size="small" v-if="scope.row.astate == 0" disabled>正常使用</el-button>
                                                <el-button type="danger" size="small" v-if="scope.row.astate == -1" disabled>冻结状态</el-button>
                                            </span>
                                        </template>
                                    </el-table-column>

                                    <el-table-column label="权限等级" width="100">
                                        <template slot-scope="scope">
                                            <span style="margin-left: 10px">{{ scope.row.gradeType }}</span>
                                        </template>
                                    </el-table-column>

                                    <el-table-column label="权限名称" width="180">
                                        <template slot-scope="scope">
                                            <span style="margin-left: 10px">{{ scope.row.gradeName }}</span>
                                        </template>
                                    </el-table-column>

                                    <el-table-column label="创建时间" width="180">
                                        <template slot-scope="scope">
                                            <i class="el-icon-time"></i>
                                            <span style="margin-left: 10px">{{ scope.row.acreateTime }}</span>
                                        </template>
                                    </el-table-column>

                                    <el-table-column label="最后登录时间" width="180">
                                        <template slot-scope="scope">
                                            <i class="el-icon-time"></i>
                                            <span style="margin-left: 10px">{{ scope.row.alastLoginTime }}</span>
                                        </template>
                                    </el-table-column>

                                    <el-table-column label="操作">
                                        <template slot-scope="scope">
                                            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">
                                                编辑
                                            </el-button>
                                            <el-button v-if="scope.row.gradeType != 1" size="mini" type="danger"
                                                       @click="handleDel(scope.$index, scope.row)">
                                                删除
                                            </el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </template>
                        </table>
                    </div>
                    <div class="layui-card-body ">
                        <div class="page">
                            <div>
                                <a class="prev" href="">&lt;&lt;</a>
                                <a class="num" href="">1</a>
                                <span class="current">2</span>
                                <a class="num" href="">3</a>
                                <a class="num" href="">489</a>
                                <a class="next" href="">&gt;&gt;</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <el-dialog title="删除提示" :visible.sync="delDialog" width="30%">
        <span>确定删除此管理员?</span>
        <span slot="footer" class="dialog-footer">
        <el-button @click="delDialog = false">取 消</el-button>
        <el-button type="primary" @click="adminDelete()">确 定</el-button>
        </span>
    </el-dialog>

</div>
</body>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            adminData: [],
            delDialog: false,
            adminId:-1,
            tempAdmin:{},
            freeze:false
        },
        methods: {
            init() {
                var _this = this
                methodaxios.get({}, "http://localhost:8080/admin-app/grade", res => {
                    console.log(res)
                    _this.adminData = res.data
                })
            },
            handleEdit(index, row) {
                console.log(index, row);
            },
            handleDel(index,row){
                if(row.astate == -1){
                    this.delDialog = false
                    this.$message.error('账号已冻结');
                }else{
                    this.delDialog = true
                }
                this.tempAdmin=row
                this.adminId = row.id

            },
            adminDelete() {

                this.tempAdmin.astate = -1
                methodaxios.get({}, "http://localhost:8080/admin-app/del/"+this.adminId, res => {
                    this.delDialog = false
                })
            }
        },
        mounted() {
            this.init()
        }
    })


    layui.use(['laydate', 'form'], function () {
        var laydate = layui.laydate;
        var form = layui.form;

        //执行一个laydate实例
        laydate.render({
            elem: '#start' //指定元素
        });

        //执行一个laydate实例
        laydate.render({
            elem: '#end' //指定元素
        });
    });

    /*用户-停用*/
    function member_stop(obj, id) {
        layer.confirm('确认要停用吗？', function (index) {

            if ($(obj).attr('title') == '启用') {

                //发异步把用户状态进行更改
                $(obj).attr('title', '停用')
                $(obj).find('i').html('&#xe62f;');

                $(obj).parents("tr").find(".td-status").find('span').addClass('layui-btn-disabled').html('已停用');
                layer.msg('已停用!', {icon: 5, time: 1000});

            } else {
                $(obj).attr('title', '启用')
                $(obj).find('i').html('&#xe601;');

                $(obj).parents("tr").find(".td-status").find('span').removeClass('layui-btn-disabled').html('已启用');
                layer.msg('已启用!', {icon: 5, time: 1000});
            }

        });
    }

    /*用户-删除*/
    function member_del(obj, id) {
        layer.confirm('确认要删除吗？', function (index) {
            //发异步删除数据
            $(obj).parents("tr").remove();
            layer.msg('已删除!', {icon: 1, time: 1000});
        });
    }


    function delAll(argument) {

        var data = tableCheck.getData();

        layer.confirm('确认要删除吗？' + data, function (index) {
            //捉到所有被选中的，发异步进行删除
            layer.msg('删除成功', {icon: 1});
            $(".layui-form-checked").not('.header').parents('tr').remove();
        });
    }
</script>
<script>var _hmt = _hmt || [];
(function () {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
})();</script>
</html>